<template>
    <div class="backgImage">
        <div class="div1">
            <TitleView title="FGS监测" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <RemindA :data="dataA.yes" :title="'正常'" />
                <RemindA :data="dataA.no" :title="'异常'" />
            </div>
        </div>
        <div class="div2">
            <TitleView title="近五月报警统计" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <RemindLeftB :data="dataB" />
            </div>
        </div>
        <div class="div2">
            <TitleView title="报警事件" :titlemore="false" @titleClick="titleMoreClick"></TitleView>
            <div class="div1_d pl32 pr32">
                <RemindLeftC :data="DataDevice" />
            </div>
        </div>
    </div>
</template>

<script>
import RemindA from "./components/RemindA.vue";
import RemindLeftB from "./components/RemindLeftB.vue";
import RemindLeftC from "./components/RemindLeftC.vue";
import { warn_left } from "@/request/api";
export default {
    components: {
        RemindA,
        RemindLeftB,
        RemindLeftC,
    },
    data() {
        return {
            DataDevice: [],
            dataA: { yes: "0", no: "0" },
            dataB: [[], []],
        };
    },
    created() {
        this.getData();
    },
    methods: {
        titleMoreClick(msg) {
            console.log(msg);
        },
        getData() {
            warn_left().then((res) => {
                console.log("res:", res);
                this.dataA = res.data.data1;
                this.dataB = res.data.data2;
                this.DataDevice = res.data.data3;
            });
        },
    },
};
</script>

<style lang="scss" scoped>
.div1 {
    height: 257px;

    .div1_d {
        margin-top: 20px;
    }
}

.div2 {
    height: 343px;

    .div1_d {
        margin-top: 20px;
    }
}

.div3 {
    .div1_d {}
}
</style>
